 export default function(idString, canvasList) {
 	var ctx = uni.createCanvasContext(idString); //创建画布
 	canvasList.forEach(item => {
 		switch (item.type) {
 			case 'image':
 				canvasFun.drawImg(item, ctx)
 				break;
 			case 'border':
 				canvasFun.drawUsingArc(item, ctx)
 				break;
 			case 'text':
 				canvasFun.drawText(item, ctx)
 				break;
 			case 'dom':
 				canvasFun.drawDom(item, ctx)
 				break;
 		}
 	})
 }
 const canvasFun = {
 	drawDom(obj, ctx) {
 		const {
 			parentId,
 			chlildren
 		} = obj
 		const query = uni.createSelectorQuery()
 		chlildren.forEach(item => {
 			const {
 				type
 			} = item;

 			query.select(parentId + ">" + item.class)
 				.boundingClientRect((rect) => {
 					const {
 						left,
 						top,
 						width,
 						height
 					} = rect;
 					let myobj = {}
 					if (type == 'image') {
 						myobj = {
 							x: left,
 							y: top,
 							width,
 							height,
 							...item,
 						};
 						setTimeout(() => {
 							this.drawImg(myobj, ctx)
 						})
 					} else if (type == 'text') {
 						const {
 							innerHtml,
 							color,
 							fontSize
 						} = item
 						myobj = {
 							innerHtml,
 							color,
 							fontSize,
 							x: left,
 							y: top,
 							...item,

 						};
 						this.drawText(myobj, ctx)
 					}


 				})

 		})

 		query.exec(function(res) {})
 	},
 	drawText(obj, ctx) {
 		const {
 			innerHtml,
 			color,
 			fontSize,
 			x,
 			y
 		} = obj;
 		ctx.setFontSize(fontSize)
 		// ctx.font = ' bold 20px Arial'
 		ctx.setFillStyle(color)
 		ctx.setTextAlign('left')
 		ctx.fillText(innerHtml, x, y);
 		ctx.draw(true);
 	},
 	saveShareImg() {
 		uni.showLoading({
 			title: '正在保存',
 			mask: true,
 		})
 		uni.canvasToTempFilePath({
 			canvasId: 'myCanvas',
 			success: function(res) {
 				uni.hideLoading();
 				var tempFilePath = res.tempFilePath;
 				// 分享本地文件
 				wx.showShareImageMenu({
 					path: tempFilePath,
 					success: function(res) {
 						console.log(res);
 					},
 					fail: function(err) {
 						console.log(err);
 					}
 				});
 			}
 		});
 	},
 	drawImg(obj, ctx) {
 		const {
 			src,
 			x,
 			y,
 			width,
 			height,
 			isCricle
 		} = obj;
 		let r = 0;
 		if (isCricle) {

 			if (width > height) {
 				r = height / 2;
 			} else {
 				r = width / 2;
 			}
 			ctx.save(); //save和restore可以保证样式属性只运用于该段canvas元素
 			// ctx.strokeStyle = '#fff'; //设置边线的颜色
 			// ctx.lineWidth = 2;
 			// ctx.beginPath(); //开始路径
 			// ctx.arc(x + r, y, r, 0, Math.PI * 2); //画一个整圆.
 			// ctx.stroke();
 			// ctx.closePath();
 			ctx.beginPath();
 			ctx.arc(x + r, y + r, r, 0, Math.PI * 2);
 			ctx.clip();
 			ctx.closePath();
 		}
 		ctx.drawImage(src, x, y, width, height)
 		ctx.restore()
 		ctx.draw(true);
 	},
 	drawUsingArc(obj, ctx) {
 		const {
 			rect,
 			radius,
 			lineColor,
 			fillColor
 		} = obj
 		const r = radius
 		var Point = (x, y) => {
 			return {
 				x: x,
 				y: y
 			};
 		};
 		var ptA = Point(rect.x + r, rect.y);
 		var ptB = Point(rect.x + rect.width, rect.y);
 		var ptC = Point(rect.x + rect.width, rect.y + rect.height);
 		var ptD = Point(rect.x, rect.y + rect.height);
 		var ptE = Point(rect.x, rect.y);
 		ctx.strokeStyle = lineColor;
 		ctx.beginPath();
 		ctx.moveTo(ptA.x, ptA.y);
 		ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);
 		ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);
 		ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r);
 		ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);
 		ctx.closePath();
 		ctx.fillStyle = fillColor;
 		ctx.fill();
 		ctx.stroke();
 		ctx.draw(true);
 	}

 }